<script setup lang="ts">
import {searchUserListStore} from "../../store/searchUserListStore.ts";
import {onMounted, ref} from "vue";

const userListStore = searchUserListStore();
const userList = userListStore.userList;
const isEmpty = ref<boolean>(false);
onMounted(() => {
  if (userListStore === null || userListStore === undefined) {
    isEmpty.value = true;
  }
})

const goBackAndClear = () => {
  userListStore.userList = null
  history.back()
}
</script>

<template>
  <van-nav-bar title="查询结果" left-text="返回" left-arrow @click-left="goBackAndClear" />
  <van-empty v-if="isEmpty" description="查询结果为空" />
  <div v-if="!isEmpty">
    <div v-for="item in userList" :key="item.id" style="display: flex">
      <div>
        <van-image width="100" height="100" :src="item.avatarUrl" fit="cover"></van-image>
      </div>
      <div style="margin-left: 30px">
        <p>{{ item.userAccount }}</p>
        <van-tag plain type="primary" v-for="tag in JSON.parse(item.tags)" style="margin-right: 3px">{{tag}}</van-tag>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>